<template>
  <div>
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" /><br /><br />

    <input type="text" v-model.number="count1" />
    <button @click="submit">点击提交</button><br /><br /><br /><br />
    <input type="text" v-model.trim="count2" />
    <button @click="getnum">点击提交</button><br /><br /><br />
    <h1>{{ count3 }}</h1>
    <input type="text" v-model.lazy="count3" />
    <br /><br /><br />

    <input type="checkbox" v-model="checked" />
    <h1>{{ checked ? '选中了' : '没有选中' }}</h1>
    <br /><br /><br />
    <input type="radio" v-model="checked" value="1" name="sex" />男生
    <input type="radio" v-model="checked" value="2" name="sex" />女生
    <button @click="hand">提交</button><br /><br /><br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '展示的信息',
      count1: 1000,
      count2: '你好',
      count3: '',
      falg: true,
      checked: true,
    }
  },
  methods: {
    submit() {
      console.log(this.count1)
    },
    getnum() {
      console.log(this.count2.length)
    },
    // inp() {
    //   console.log('触发input事件')
    // },
    // chg() {
    //   console.log('触发change事件')
    // },
    hand() {
      console.log(this.checked)
    },
  },
}
</script>
